
<template>
  <div style="min-height: calc(100vh - 340px)">
    <div class="flex mb-[50px] items-center">
      <div class="w-[220px] flex items-center">
        <span style="width: 100px">用户名：</span>
        <span v-if="!data.nameChangeing">{{ data.username }}</span>
        <a-input
          v-else
          v-model:value="data.new_username"
          placeholder="请输入用户名"
        ></a-input>
      </div>
      <a-button
        danger
        v-if="!data.nameChangeing"
        type="link"
        @click="changeName"
        >重命名</a-button
      >
      <template v-else>
        <a-button danger type="link" @click="submitName">确认</a-button>
        <a-button danger type="link" @click="data.nameChangeing = false"
          >取消</a-button
        >
      </template>
    </div>

    <div class="flex mb-[50px] items-center">
      <div class="w-[220px] flex items-center">
        <span style="width: 100px">手机号：</span>
        <span>{{ data.tel }}</span>
      </div>
      <a-button danger type="link" @click="data.phoneChangeing = true"
        >去更换</a-button
      >
    </div>

    <div class="flex mb-[50px] items-center">
      <div class="w-[220px] flex items-center">
        <span style="width: 100px">邮箱：</span>
        <span v-if="!data.emailChangeing">{{ data.email }}</span>
        <a-input
          v-else
          v-model:value="data.new_email"
          placeholder="请输入邮箱"
        ></a-input>
      </div>
      <a-button
        danger
        v-if="!data.emailChangeing"
        type="link"
        @click="changeEmail"
        >重命名</a-button
      >
      <template v-else>
        <a-button danger type="link" @click="submitEmail">确认</a-button>
        <a-button danger type="link" @click="data.emailChangeing = false"
          >取消</a-button
        >
      </template>
    </div>

    <a-modal
      v-model:open="data.phoneChangeing"
      :closable="false"
      :footer="null"
      @ok="handleOk"
      :width="360"
    >
      <div class="grid justify-items-center">
        <div class="text-[18px] text-[#333] font-bold">安全验证</div>

        <div class="mt-[30px]">
          为了保证您的账号安全，请验证身份。 验证成功后进行下一步操作。
        </div>

        <div class="text-[18px] text-[#333] mt-[20px]">
          {{ data.tel.slice(0, 3) }}****{{ data.tel.slice(7, 11) }}
        </div>

        <a-input
          class="mt-[20px]"
          v-model:value="data.code"
          placeholder="请输入短信验证码"
        >
          <template #suffix>
            <a-button type="link" danger @click="getCode">获取验证码</a-button>
          </template>
        </a-input>

        <a-input
          class="mt-[20px]"
          v-model:value="data.new_tel"
          placeholder="请输入新的手机号码"
          :showClose="false"
        ></a-input>

        <div class="flex gap-[20px] w-full mt-[20px]">
          <a-button class="flex-1" type="primary" @click="changeTel"
            >确认</a-button
          >
          <a-button class="flex-1" @click="closePhone">取消</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { message } from "ant-design-vue";
import { computed, onMounted, watch } from "vue";
import {
  changeUsername,
  getCodeByTel,
  changeTel as changeTel1,
  changeEmail as changeEmail1,
} from "../../../../Api/work/index";
import { useUserStore } from "../../../../stores/menuStore";

const data = reactive({
  nameChangeing: false,
  phoneChangeing: false,
  emailChangeing: false,
  username: "",
  new_username: "",
  new_tel: "",
  tel: "",
  new_email: "",
  email: "",
  code: "",
});

const changeName = () => {
  data.nameChangeing = true;
};
const changeEmail = () => {
  data.emailChangeing = true;
};

const closePhone = () => {
  data.phoneChangeing = false;
  data.code = "";
};

const submitName = async () => {
  const res = await changeUsername({ username: data.new_username });
  if (res?.data?.code == 1) {
    message.success("操作成功");
    data.nameChangeing = false;
    data.username = data.new_username;
    store.setUser();
  } else {
    message.error(res?.data?.msg);
  }
};

const getCode = async () => {
  const res = await getCodeByTel({ tel: data.tel });
  if (res?.data?.code == 1) {
    message.success("发送成功");
  } else {
    message.error(res?.data?.msg);
  }
};

const changeTel = async () => {
  const res = await changeTel1({
    tel: data.tel,
    new_tel: data.new_tel,
    code: data.code,
  });
  if (res?.data?.code == 1) {
    message.success("操作成功");
    data.phoneChangeing = false;
    data.tel = data.new_tel;

    store.setUser();
  } else {
    message.error(res?.data?.msg);
  }
};

const submitEmail = async () => {
  const res = await changeEmail1({ email: data.new_email });
  if (res?.data?.code == 1) {
    message.success("操作成功");
    data.emailChangeing = false;
    data.email = data.new_email;
    store.setUser();
  } else {
    message.error(res?.data?.msg);
  }
};

const store = useUserStore();
const user = computed(() => {
  return store.user
});
watch(
  () => user.value,
  () => {
    init();
  }
);

onMounted(() => {
  init();
});
function init() {
  console.log("user.value", user.value);
  data.username = user.value.account;
  data.new_username = user.value.account;
  // data.new_tel = user.value.mobile;
  data.tel = user.value.mobile;
  data.new_email = user.value.email;
  data.email = user.value.email;
}
</script>

<style lang="scss" scoped>
</style>


